<template>
  <div style="min-height: 100vh; background: #fff;">
    <top-bar :title="dataForm.username" bgc="background-color:#fff"></top-bar>
    <van-swipe :autoplay="3000" style="width: 100%; height: 40vh;">
      <van-swipe-item v-for="item in dataForm.recImage" :key="item._id">
        <img style="width: 100%; height: 40vh;" v-lazy="item" />
      </van-swipe-item>
    </van-swipe>
    <p class="topic">{{dataForm.rectopic}}</p>
    <p class="content">{{dataForm.reccontent}}</p>
    <van-button
      style="margin: 20px 0 0 10px; padding: 0 10px; font-size: 14px; border-radius: 30px; background-color: #eee; color: #4994DF"
      icon="hot-o"
      size="mini"
      type="info"
    >{{dataForm.joinTopic}}</van-button>
    <p class="time">{{dataForm.createTime | dayTime}}</p>
    <van-divider style="margin-top: 15px;" />
    <div class="command">
      <p>共有42条评论</p>
      <van-cell style=" margin-top: 15px;">
        <van-image
          style="float: left;"
          width="40px"
          height="40px"
          round
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-field class="input" v-model="comment" placeholder="喜欢就给个评论支持一下~"></van-field>
      </van-cell>
    </div>
  </div>
</template>

<script>
import TopBar from "@/views/component/topBar";
export default {
  components: {
    TopBar
  },
  data() {
    return {
      comment: "",
      dataForm: {
        username: "已卸载",
        content: `van-cell 组件默认宽度为各占50%
想要增加value的宽度，给当前组件的van-cell__value设置min-width
van-cell__value本身是右对齐，但是换行之后，最后一行需要左对齐而不是右对齐，解决方法如下面的span样式`,
        topic: "太过瘾，土豆片怎么吃着拿肉都不换~绝了，杭州旅游攻略",
        _id: 2,
        imgList: [
          "https://th.bing.com/th/id/R6706ad2e7a68edabddbc1b5644707c4f?rik=u8uR%2bWe5bxIosA&riu=http%3a%2f%2fpic.lvmama.com%2fuploads%2fpc%2fplace2%2f2016-09-14%2f9aab9bb7-2593-4ca6-8c5a-31355443aebc.jpg&ehk=HpOwqU6w6%2fssF4CJQMbTOshMh4lIXJONXU%2btYNsAKSI%3d&risl=1&pid=ImgRaw",
          "https://th.bing.com/th/id/Rb572cf0dcff93fe13b71af8ab43fd454?rik=g5YdMgIO9siDaA&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f20%2f1570365161-shmEFlWfHU.jpg&ehk=u5A16U5IZ7u6Wi3KtC7OBarR5lf1nOd8UfJP0USvLXg%3d&risl=&pid=ImgRaw",
          "https://th.bing.com/th/id/R65398d6ad86129f9628c0ad80da4040c?rik=C3qNS9mZOQk%2b5A&riu=http%3a%2f%2fwww.shijuepi.com%2fuploads%2fallimg%2f200918%2f1-20091Q10420.jpg&ehk=QBNuJIbVP1qo%2bwUD3YzXcvL4H5iHivOHXUnzzRw%2bWfU%3d&risl=&pid=ImgRaw",
          "https://th.bing.com/th/id/R1fdf3a183158c62b91e690d8beee6ebe?rik=mHL6yEiXiMAK9Q&riu=http%3a%2f%2fwww.shijuepi.com%2fuploads%2fallimg%2f200918%2f1-20091Q10417.jpg&ehk=wzkrRqNZfU1InC6bUzefYssPjoFNJBZZ7qSj6P7WHPI%3d&risl=&pid=ImgRaw",
          "https://img.zcool.cn/community/01c8f15aeac135a801207fa16836ae.jpg@1280w_1l_2o_100sh.jpg",
          "https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/03/ChMkJlbKxo2IT63KACN7OztCegEAALHmwPZIQ0AI3tT786.jpg",
          "https://tse3-mm.cn.bing.net/th/id/OIP.XHR0ESekKzxVDwpuzYIJagHaEo?pid=ImgDet&rs=1",
          "https://tse4-mm.cn.bing.net/th/id/OIP.rTs_8oASfSswyOZn2jdr4gHaLJ?pid=ImgDet&rs=1",
          "https://tse4-mm.cn.bing.net/th/id/OIP.YHIHn0znRU-OfddNxIpYogHaHa?pid=ImgDet&rs=1"
        ]
      }
    };
  },
  mounted() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      this.$api
        .get(`api/recommend/detail/${this.$route.params.id}`)
        .then(res => {
          this.$set(this, "dataForm", res.data.data);
        });
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.topic {
  padding: 0 10px;
  letter-spacing: 2px;
  font-weight: bold;
  font-family: "微软雅黑";
  color: #333333;
  font-size: 18px;
  margin-top: 20px;
}
.content {
  margin-top: 20px;
  padding: 10px 10px;
  font-size: 16px;
  font-family: "微软雅黑";
}
.time {
  margin-top: 20px;
  padding: 0 10px;
  font-size: 13px;
  color: #999999;
}
.command {
  margin-top: 30px;
  padding: 15px;
}
.command .input {
  width: calc(100vw - 90px);
  float: right;
  background: #eee;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  border-radius: 40px;
  padding: 0 0 0 20px;
}
</style>